<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/moneyctrl.css">
    <link rel="stylesheet" href="../css/publicfooter.css">

    <!-- [if lt IE 9]>
      <script src="./lib/html5shiv/html5shiv-printshiv.min.js"></script>
      <script src="./lib/respond/respond.js"></script>
    <![endif] -->
</head>

<body>
    <!-- 头部部分开始 -->
    <div class="header">
        <div class="headerLeft">
            <a href="../index.html">
                <span class=" glyphicon glyphicon-menu-left"></span>
            </a>
        </div>
        <div class="title">
            省钱控-最新优惠
        </div>
        <div class="headerRight">
            <a href="javascript:;">
          <img src="../images/header_app.png" alt="">
        </a>
        </div>
    </div>
    <!-- 头部部分结束 -->
    <!-- 主体部分开始 -->
    <div class="moneyctrl_content">
        <ul class="moneyctrl">

        </ul>
    </div>
    <!-- 主体部分结束 -->

    <!-- 分页结构部分开始 -->
    <div id="page" class="page">
        <table width="100%">
            <tbody>
                <tr>
                    <td>
                        <a href="javascript:;" class="pre">上一页</a>
                    </td>
                    <td>
                        <select id="selectPage"> 
  
                        </select>
                    </td>
                    <td> <a href="javascript:;" class="next">下一页</a> </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- 分页结构部分结束 -->
    <!-- 底部部分开始 -->
    <div class="footer">
        <div class="container-fluid">
            <div class="row">
                <ul class="footerList">
                    <li class="col-xs-4">
                        <a href="javascript:;">
                            登录
                        </a>
                    </li>
                    <li class="col-xs-4">
                        <a href="javascript:;">
                            注册
                        </a>
                    </li>
                    <li class="col-xs-4">
                        <a href="javascript:;">
                            <span class="glyphicon glyphicon-arrow-up"></span>
                            返回顶部
                        </a>
                    </li>
                </ul>
                <p>
                    <a href="javascript:;">
                        <span>
                            手机app下载
                        </span>
                    </a>&nbsp;&nbsp;&nbsp;
                    <a href="javascript:;">
                        <span>
                            慢慢手机版下载
                        </span>
                        <span>
                            --掌上比价平台
                        </span>
                    </a>
                </p>
                <p>m.manmanbuy.com</p>
            </div>
        </div>
    </div>
    <!-- 底部部分结束 -->

    <script src="../lib/jquery/jquery.js"></script>
    <script src="../lib/bootstrap/js/bootstrap.js"></script>
    <script src="../js/template-web.js"></script>
    <script src="../js/zepto.min.js"></script>
    <script src="../js/touch.js"></script>
    <script src="../js/backtop.js"></script>
    
</body>

</html>
<script type="text/template" id="shopTemp">
    <%for(i=0;i<item.length;i++){%>
        <li>
            <div class="shopimg">
                <a href="./monyctrlF.html?productid=<%=item[i].productId%>&productssid=<%=i%>" data-id=<%=i%>>
                    <%=#item[i].productImgSm%>
                </a>
            </div>
            <div class="content_right">
                <div class="ico_top">
                    <a href="./monyctrlF.html?productid=<%=item[i].productId%>&productssid=<%=i%>">
                        <%=item[i].productName%><%=item[i].productPinkage%>
                    </a>
                </div>
                <div class="ico_bottom">
                    <div class="Bleft">
                       <%=item[i].productFrom%>&nbsp;|&nbsp;<%=item[i].productTime%>
                    </div>
                    <div class="Bright">
                        <a href="javascript:;">
                            <span class="glyphicon glyphicon-comment"></span>
                        <span><%=item[i].productComCount%></span>
                        </a>
                    </div>
                </div>
            </div>
        </li>
        <% }%>
</script>
<script type="text/template" id="optionTemp">
    <% for(var i=0;i< items.pagetotal ;i++){ %>
        <option <%=i==0? "selected": ''%> data-pageid="<%=i+1%>">
            <%=i+1%>/<%=items.pagetotal%>
        </option>
        <% }%>
</script>

<script>
    $(function () {
        var pageid = 1;
        var pagetotal = 0;
        var reder = function (pageid) {
            $.ajax({
                url: "http://193.112.55.79:9090/api/getmoneyctrl",
                data: {
                    pageid: pageid - 1,
                },
                dataType: "json",
                success: function (res) {
                    console.log(res)
                    // console.log(res.pagesize);
                    pagetotal = Math.ceil(res.totalCount / res.pagesize);
                    res.pagetotal = pagetotal;
                    var moneyctrlHtml = template("shopTemp", { "item": res.result });
                    $(".moneyctrl").html(moneyctrlHtml);
                    var html2 = template("optionTemp", {"items":res});
                    $("#selectPage").html(html2);
                    $("#selectPage").find("option").eq(pageid - 1).attr("selected", "selected");
                }
            })
        }
        reder(pageid);
        $("#selectPage").on("change",function () {
            var optionId =$(this).find("option:selected").data("pageid");
            // console.log(optionId);
            reder(optionId);
        })
        $(".pre").on("tap",function () {
            var pageid = $("#selectPage").find("option:selected").data("pageid");
            if(pageid<=1){
                return;
            }else{
                pageid--;
                reder(pageid);
            }

        })
        $(".next").on("tap", function () {
                var pageid = $("#selectPage").find("option:selected").data("pageid");
                if (pageid>=pagetotal) {
                    return;
                } else {
                    pageid++;
                    reder(pageid);
                }

            })
    })

</script>